<template>
<div>
    <el-row>
      <el-col :span="24">
        <!-- 删除过程中，不允许其他操作 -->
        <el-button v-if="!showDeleteCheckbox" type="primary" @click="updateTableItem()">新增</el-button>
       
      </el-col>
    </el-row>
    <el-table stripe :data="tableData" style="border: 1px solid #ebebeb;border-radius: 3px;margin-top: 10px;">
      <el-table-column prop="courseId" label="id" width="100">
        <template slot-scope="scope">
          <!-- el-checkbox 多选框，checked 绑定是否选中，click 绑定点击事件 -->
          <el-checkbox v-if="showDeleteCheckbox" 
          :checked="chosenItem.indexOf(scope.row.courseId) > -1"
           @change="toggleChosenItem(scope.row.courseId)" 
           style="margin-right: 5px;">
           </el-checkbox>
          <span>{{scope.row.courseId}}</span>
        </template >
      </el-table-column>
      <el-table-column prop="courseNum" label="课程编号" width="200"></el-table-column>
      <el-table-column prop="courseName" label="课程名" width="200"></el-table-column>
      <el-table-column fixed="right" label="操作" width="280">
        <template slot-scope="scope">
          <!-- 删除过程中，禁用其他操作 -->
       
          <el-button :disabled="showDeleteCheckbox"
           @click="deleteTableItem([scope.row.courseId])"
            type="danger" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
//import tableData from './cdata';
// 下面是 Vue 组件
export default {
  inject:['reload'],
  data() {
    return {
      tableData:[], // tableData: tableData 的简写
      dialogFormVisible: false, // 弹窗是否出现
      showDeleteCheckbox: false, // 是否批量删除
      chosenItem: [], // 选中的选项
    };
  },
   created() {
     this.getCourseList();
  },
  methods: {
     getCourseList  ()  {
      console.log('连接后端')
      this.axios({
        method: "get",
        url: "http://localhost:8080/course/"
      }).then(res => {
        this.tableData = res.data;
        console.log('获取数据成功');
        this.reload()
      });
    },
// 新增一个数据
    updateTableItem(courseId = 0) {
       // 跳转到编辑页面，新增则传id为0，否则为编辑
        console.log(courseId)
        this.$router.push({name: 'Cadd',params:{courseId}})
      
    },
       // 删除一个数据
    deleteTableItem(courseId) {
      console.log("连接删除后端"); 
      console.log(courseId)                          
      this.axios({
        method: "delete",
        url: "http://localhost:8080/course/"+courseId,
        
        
      }).then(() => {
        this.getCourseList(),
        console.log("删除数据1111111");
      });
    },
    // 切换选中的选项
    toggleChosenItem(id){
      const index = this.chosenItem.findIndex(x => x.id === id);
      if(index > -1){
        // 有该选项则删除
        this.chosenItem.splice(index, 1);
      }else{
        // 无该选项则添加
        this.chosenItem.push(id);
      }
    },
    // 提交新增/修改表单
    submitForm(){
      // 校验表单
      // Element 表单校验规则配置，请查看https://element.eleme.cn/#/zh-CN/component/form
      this.$refs['form'].validate((valid) => {
        if (valid) {
          // 校验通过
          this.dialogFormVisible = false; 
          this.updateTableItem(this.form);
        } else {
          // 校验失败
          return false;
        }
      });
    }
  }
};
</script>

<style>
</style>
